<meta charset="UTF-8">
<style>
    #adddevice .ivu-select-dropdown-list{
        max-height: 300px;
    }
</style>
<div id="adddevice">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.addDev")}}</h3>
        <div>
            <Row style="margin: 10px 0" v-if="userType == 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;选择账号 : &nbsp;</i-col>
                <i-col span="8">
                    <div class="search-wrapper">
                        <i-input v-model.trim="createrToUser"  :icon="iconState" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus"></i-input>
                        <transition name="fade">
                            <ul class="search-item-wrapper" v-show="isShowMatchDev" style="cursor: pointer;">
                                <li v-for="item in userlists" style="padding:5px 10px;" @click="selectedCmd(item)" :class="{'ivu-select-item-focus':item == createrToUser}">
                                    <Option :value="item" :key="item">
                                        <span style="cursor: pointer;">{{ item }}</span>
                                    </Option>
                                </li>
                            </ul>
                        </transition>
                    </div>
                </i-col>
            </Row>
            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("alarm.devNum")}} : &nbsp;</i-col>
                <i-col span="8">
                        <i-input v-model.trim="deviceid"></i-input>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("alarm.devName")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="devicename"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.devType")}} : &nbsp;</i-col>
                <i-col span="8">  
                    <!-- devicetype -->
                    <i-select v-model="devicetype" style="width: 100%">
                        <i-option v-for="item in deviceTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                    </i-select>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">SIM : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim.number="simnum"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;终身免费 : &nbsp;</i-col>
                <i-col span="8">  
                    <i-select v-model="isfree" style="width: 100%">
                        <i-option value="1">是</i-option>
                        <i-option value="0">否</i-option>
                    </i-select>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("alarm.overdueTime")}} : &nbsp;</i-col>
                <i-col span="8">
                    <date-picker type="date" v-model="overduetime" :options="dateOptions" style="width: 100%"></date-picker>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("user.grouping")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="groupid">
                        <i-option v-for="item in groupsList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                    </i-select>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;网络类型 : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="teltype">
                        <i-option value="1">2G</i-option>
                        <i-option value="2">3G</i-option>
                        <i-option value="3">4G</i-option>
                    </i-select>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.reportCount")}}
                    : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="reportedpoint"></i-input>
                </i-col>
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.allReportCount")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="totalpoint"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.allowLogin")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="loginenable">
                        <i-option value="0">{{$t("user.ban")}}</i-option>
                        <i-option value="1">{{$t("user.allow")}}</i-option>
                    </i-select>
                </i-col> 
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.isUse")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-select v-model="deviceenable">
                        <i-option value="0">{{$t("user.ban")}}</i-option>
                        <i-option value="1">{{$t("user.allow")}}</i-option>                     
                    </i-select>
                </i-col>                  
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;监护账号 : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="monitor"></i-input>
                </i-col>

                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;"></i>&nbsp;{{$t("device.loginPwd")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="loginpwd" :placeholder="$t('device.pwdTips')"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;转发地址 : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="forwardurl"></i-input>
                </i-col>
            </Row>



            <Row style="margin: 10px 0">
                <i-col span="6" :offset="7">
                    <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                </i-col>
                <i-col span="6" :offset="1">
                    <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                </i-col>
            </Row>
        </div>
    </div>
    <script>
        new Vue({
            el:"#adddevice",
            i18n: utils.getI18n(),
            data:{
                dateOptions:{
                    disabledDate:function(date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                teltype:'',
                iconState:"ios-arrow-down",
                deviceid:"",
                devicename:"",
                devicetype:"",
                simnum:"",
                overduetime:"",
                loginpwd:"",
                loginenable:"1",
                deviceenable:"1",
                groupsList:[],
                deviceTypeList:[],
                groupid:'',
                companyid:'',
                reportedpoint:0,
                totalpoint:1500,
                checkboxObj:{},
                forwardurl:"",
                createrToUser:"",
                userlists:[],
                userType:null,
                timeoutIns:null,
                isShowMatchDev:false,
                monitor:"",
                isfree:"1",
            },
            methods: {
                selectedCmd:function(item){
                    var me = this;
                    setTimeout(function () {
                        me.isShowMatchDev = false;
                        me.createrToUser = item;
                    }, 100)
                },
                sosoValueChange:function(){
                    var me = this;
                    var value = this.createrToUser.toLowerCase();

                    if (this.timeoutIns != null) {
                        clearTimeout(this.timeoutIns);
                    }

                    if (!value.trim()) {
                        this.userlists = userlists;
                        return;
                    }

                    this.timeoutIns = setTimeout(function () {
                        me.filterMethod(value);
                    }, 100);
                },
                focus: function () {
                    this.isShowMatchDev = true;
                },
                blur: function () {
                    var me = this
                    setTimeout(function () {
                        me.isShowMatchDev = false;
                    }, 300)
                },
                filterMethod:function(value){
                    var list = [];
                    userlists.forEach(function (itme) { 
                        if(itme.toLowerCase().indexOf(value) != -1){
                            list.push(itme);
                        }
                    })
                    this.userlists = list;
                },
                handleSubmit:function(){
                    var me = this;
                    var url = myUrls.addDevice();

                    if(this.deviceid.length < 11  || this.deviceid.length > 15 ){ 
                        me.$Message.error(me.$t("device.devIdTips"));
                        return;
                    };

                    if(this.overduetime == ""){
                        me.$Message.error(me.$t("message.fullComplete"));
                        return;
                    };

                    var data = {
                        deviceid:this.deviceid,                      
                        devicetype:this.devicetype,
                        isfree:Number(this.isfree),
                        overduetime:new Date(this.overduetime).getTime(),
                        loginenable:Number(this.loginenable),
                        deviceenable:Number(this.deviceenable),
                    };      
                    
                    if(this.devicename) data.devicename = this.devicename;
                    if(this.teltype) data.teltype = Number(this.teltype);

                    if(this.monitor){ data.monitor = this.monitor;}

                    if(this.loginpwd){
                        data.loginpwd = $.md5(this.loginpwd);
                    }else{
                     	var legnth = this.deviceid.length;
                        data.loginpwd = $.md5(this.deviceid.substring(legnth-4,legnth));
                    };

                    if(this.simnum){
                        data.simnum = this.simnum;
                    };

                    if(this.groupid){
                        data.groupid = this.groupid;
                    };

                    if( this.reportedpoint == 0 || this.reportedpoint && !isNaN(this.reportedpoint)){
                        data.reportedpoint = Number(this.reportedpoint);
                    }

                    if(this.totalpoint && !isNaN(this.totalpoint)){
                        data.totalpoint = Number(this.totalpoint);
                    }
                    
                    this.forwardurl && (data.forwardurl = this.forwardurl);

                    if(this.userType == 0){
                        data.creater = this.createrToUser;
                    }else{
                        data.creater = userName;
                    };

                    utils.sendAjax(url,data,function (resp) { 
                        if(resp.status == 0){
                            isNeedRefresh = true;
                            me.$Message.success(me.$t("message.addSucc"));
                        }else if(resp.status == -1){
                            if( resp.cause!== null && resp.cause.indexOf("token")!=-1){
                                window.location.href = "index.html";
                            }else{
                                me.$Message.error(me.$t("message.addFail"));
                            }
                        }else if(resp.status == 1 ){
                            me.$Message.error(me.$t("message.IDRepeat"));
                        }else if(resp.status == 2 ){
                            me.$Message.error(me.$t('message.IDError'));
                        }else if(resp.status == 3 ){
                            me.$Message.error(me.$t('message.reqFail'));
                        };
                    });
                },
                resetInfo:function(){
                    this.deviceid = "";
                    this.devicename = "";
                    this.devicetype = "";
                    this.simnum = "";
                    // this.overduetime = "";
                    this.loginpwd = "";
                    this.loginenable = "1";
                    this.deviceenable = "1";
                    this.groupid = "";
                    this.companyid = "";
                },
                getGroupsList:function(){
                    var me = this; 
                    var url = myUrls.queryGroupByUser();                  
                    utils.sendAjax(url,{},function (resp) { 
                        var groupList = [];
                        if(resp.status === 0 && resp.grouplist){
                            resp.grouplist.forEach(function (group) { 
                                groupList.push({label:group.groupname,value:group.groupid});
                            })
                        }
                        me.groupsList = groupList;
                    });
                },
                getDeviceType:function () {
                    var me = this;
                    vstore.state.deviceTypes .forEach(function (item) { 
                        var label = item.typename;
                        if(item.remark){
                            label += "("+item.remark+")";
                        }
                        me.deviceTypeList.push({value:item.devicetypeid,label:label});
                    })
                    me.devicetype = 1;
                },
                   
            },
            watch:{
                isShowMatchDev:function(){
                    if(!this.isShowMatchDev){
                        this.iconState = "ios-arrow-down";
                    }else{
                        this.iconState = "ios-arrow-up";
                    }
                },

            },
            mounted:function () {
                this.getDeviceType();
                this.getGroupsList();  
                this.userlists = userlists;
                this.overduetime = new Date(Date.now() + 365*24*3600*1000) ;
                this.userType = vstore.state.userType;
            } 
        })
    </script>
</div>